<template>
  <div class="article-com">
    <!--  推荐内容  -->
    <!-- <carousel/> -->

    <!--  文章内容  -->
    <el-tabs class="article-list" tab-position="top" type="card" :stretch="true" @tab-click="tabsSelect">
      <el-tab-pane label="综合排序"></el-tab-pane>
      <el-tab-pane label="按点赞量排序"></el-tab-pane>
      <el-tab-pane label="按发布时间排序"></el-tab-pane>
      <el-tab-pane label="按更新时间"></el-tab-pane>
    </el-tabs>


    <!-- <ArticleList/> -->
        <el-row>
          <el-col v-for="article in articleList"
                  :key="article.Id"  :span="20" :offset="2" @click="articleDetail(article.Id)" class="article">
            <el-card :body-style="{ padding: '20px' }" shadow="hover">
              <el-descriptions :title="article.Title">
                <el-descriptions-item label="用户名">{{article.Username}}</el-descriptions-item>
                <el-descriptions-item label="点赞数">{{article.Star}}</el-descriptions-item>
                <el-descriptions-item label="观看数">{{article.Watcher}}</el-descriptions-item>
                <el-descriptions-item v-if="Object.values(article.Tag).length>0" label="标签">
                  <el-tag size="small">{{article.Tag}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="描述：" width="80%">
                  <span class="article-desc" v-html="article.InnerText">
                  </span>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
        </el-row>

    <!--  页码显示  -->
    <page :pageInfo="pageInfo" @handleCurrentChange="handleCurrentChange"/>
  </div>
</template>

<script lang="ts">
import {onBeforeMount, reactive, ref} from "vue";
import {GETA} from "@/api/index";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

import Carousel from "@/components/carousel/Carousel.vue";
import Page from '@/components/page/Page.vue'
import ArticleList from '@/components/articleList/ArticleList.vue'

export default {
  name: "Article",
  components: {
    Carousel,
    Page,
    ArticleList
  },
  setup() {
    const router = useRouter()
    const pageInfo = reactive({
      // 当前页
      currentPage: 1,
      // 每页的数量
      pageSize: 10,
      // 总条目数
      total: 10
    })
    // 文章列表信息
    const articleList = reactive<any>([])

    // TODO 请求文章信息
    const getArticles = async () => await GETA(`/Article/GetArticles`, {}).then(res => {
      console.log(res)
      if (res.data.status === 200) {
        // pageInfo.currentPage = res.data.current
        // pageInfo.total = res.data.total
        // articleList.value = res.data.data
        res.data.data?.forEach((element: any) => {
          GETA(`/User/GetUserById?id=${element.UserId}`).then(res => {
            element.Username = res.data.data.Username
            articleList.push(element)
          })
        });
        console.log(res.data.data, articleList)
        console.log(articleList)
      } else {
        ElMessage.error("网络出现了异常，请重试一下")
      }
    }).catch(err => {
      console.log(err.response)
      ElMessage.error(err.response.data)
    })

    onBeforeMount(() => {
      // 在页面未加载到时候获取文章信息
      getArticles()
      // console.log(articleList.value.get(1))
    });

    const handleCurrentChange = (index: number) => {
      pageInfo.currentPage = index
      getArticles()
    }

    const tabsSelect = (item: any) => {
      console.log(item.index)
      if (item.index == 1) {
        articleList.sort((x: any, y: any) => {
          if (x.Star > y.Star) {
            return -1
          } else {
            return 1
          }
        })
        console.log(articleList)
      } else if (item.index == 2) {
        articleList.sort((x: any, y: any) => {
          if (x.CreateTime > y.CreateTime) {
            return 1
          } else {
            return -1
          }
        })
      } else if (item.index == 3) {
        articleList.sort((x: any, y: any) => {
          if (x.UpdateTime > y.UpdateTime) {
            return 1
          } else {
            return -1
          }
        })
      }
    }

    const articleDetail = (articleId: any) => {
      router.push(`/articlePage/${articleId}`)
    }

    return {
      articleList,
      pageInfo,
      handleCurrentChange,
      tabsSelect,
      articleDetail
    }
  }
}
</script>

<style lang="scss" scoped>
.article-com {
}


// .article-list {
//   height: 50px;
// }

// .article {
//   margin-bottom: 30px;
// }

.article-desc {
  width: 95%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-indent: 2em;
}
</style>